<template>
  <a-row :gutter="24" class="search-row">
    <x-card>
      <div slot="content" class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="24">
            <a-col :span="6">
              <a-form-item label="开始时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-date-picker
                  style="width: 100%"
                  format="YYYY-MM-DD"
                  @change="onChange1"
                  :style="{ width: '100%' }"
                  v-model="TimeOn" />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="结束时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-date-picker
                  style="width: 100%"
                  format="YYYY-MM-DD"
                  @change="onChange2"
                  :style="{ width: '100%' }"
                  v-model="TimeEnd" />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="检查方式" :labelCol="{ style: 'width:115px' }">
                <a-select allow-clear placeholder="请选择检查方式" v-model="queryParam.InspectionMethod">
                  <a-select-option v-for="item in dangerCheckData" :key="item.id" :value="item.item">{{ item.item }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="6" style="margin-bottom: 3px;">
              <a-button type="primary" @click="handleClick" :loading="saving">查询</a-button>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </x-card>
    <a-row :gutter="48" class="search-row">
      <a-col :span="24">
        <a-divider orientation="left" style="font-weight: bold; margin-bottom: -2px;margin-top: -2px"> 数据统计
        </a-divider>
        <a-card style="overflow-y: auto;" :bordered="false">
          <a-row style="width: 100%; height: 400px;">
            <a-col :span="24">
              <a-table
                bordered
                :columns="columns"
                :dataSource="loadData"
                :alert="false"
                :pagination="false"
                :rowKey="(record, index) => index"
              >
              </a-table>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
    </a-row>
  </a-row>
</template>
<script>
import { STable, XCard, XDown } from '@/components'
import { getViolationTotalQuery } from '@/api/modular/system/QHSEXyViolation'
import moment from 'moment'
import { getDangerCheckType } from '@/api/modular/system/QHSEDangerinsertManager'
export default {
    components: {
      XDown,
      XCard,
      STable
    },
    data() {
      return {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        },
        queryParam: {
          TimeOn: moment(new Date()).subtract(1, 'months').format('YYYY-MM-DD'),
          TimeEnd: moment(new Date()).format('YYYY-MM-DD') + 'T' + moment().format('23:59:59')
        },
        TimeEnd: moment(new Date(), 'YYYY-MM-DD'),
        TimeOn: moment(new Date(), 'YYYY-MM-DD').subtract(1, 'months'),
        saving: false,
        // 表头
        columns: [
          {
            title: '单位名称',
            dataIndex: 'secondaryUnit',
            width: 100,
            style: {
              fontSize: '200px'
            }
          },
          {
            title: '上级检查',
            children: [
              {
                title: '国家及地方检查',
                dataIndex: 'nationalAndLocalViolation',
                width: 110
              },
              {
                title: '集团公司及中石油技术服检查',
                dataIndex: 'groupCompanyViolation',
                width: 110
              },
              {
                title: '合计',
                dataIndex: 'superiorUnitViolationTotal',
                width: 60,
                  customRender: function(text) {
                    return <span style={{ color: '#e6b422', fontWeight: 'bold' }}>{text}</span>
                  }
              }
            ]
          },
          {
              title: '公司检查',
              children: [
                {
                  title: '领导检查',
                  dataIndex: 'companyLeadersViolation',
                  width: 60
                },
                {
                  title: '体系审核',
                  dataIndex: 'companySystemViolation',
                  width: 60
                },
                {
                  title: '专项检查',
                  dataIndex: 'companySpecificViolation',
                  width: 60
                },
                {
                  title: '合计',
                  dataIndex: 'companyViolationTotal',
                  width: 60,
                  customRender: function(text) {
                    return <span style={{ color: '#e6b422', fontWeight: 'bold' }}>{text}</span>
                  }
                }
              ]
            },
            {
              title: '二级单位检查',
              children: [
                {
                  title: '领导检查',
                  dataIndex: 'secondaryLeadersViolation',
                  width: 60
                },
                {
                  title: '体系审核',
                  dataIndex: 'secondarySystemViolation',
                  width: 60
                },
                {
                  title: '专项检查',
                  dataIndex: 'secondarySpecificViolation',
                  width: 60
                },
                {
                  title: '合计',
                  dataIndex: 'secondaryViolationTotal',
                  width: 60,
                    customRender: function(text) {
                      return <span style={{ color: '#e6b422', fontWeight: 'bold' }}>{text}</span>
                    }
                }
              ]
            },
            {
              title: '三级单位检查',
              children: [
                {
                  title: '领导检查',
                  dataIndex: 'thirdLeadersViolation',
                  width: 60
                },
                {
                  title: '专项检查',
                  dataIndex: 'thirdSpecificViolation',
                  width: 60
                },
                {
                  title: '合计',
                  dataIndex: 'thirdViolationTotal',
                  width: 60,
                  customRender: function(text) {
                    return <span style={{ color: '#e6b422', fontWeight: 'bold' }}>{text}</span>
                  }
                }
              ]
            },
            {
              title: '基层自查',
              children: [
                {
                  title: '月检查',
                  dataIndex: 'monthViolation',
                  width: 60
                },
                {
                  title: '周检查',
                  dataIndex: 'weekViolation',
                  width: 60
                },
                {
                  title: '岗位员工检查',
                  dataIndex: 'staffViolation',
                  width: 60
                },
                {
                  title: '合计',
                  dataIndex: 'selfInspectionViolationTotal',
                  width: 60,
                  customRender: function(text) {
                    return <span style={{ color: '#e6b422', fontWeight: 'bold' }}>{text}</span>
                  }
                }
              ]
            },
            {
              title: '监督检查',
              children: [
                {
                  title: '驻井监督',
                  dataIndex: 'residentSupervisorViolation',
                  width: 60
                },
                {
                  title: '巡回监督',
                  dataIndex: 'patrolSupervisionViolation',
                  width: 60
                },
                {
                  title: '电子监督',
                  dataIndex: 'electronicSupervisionViolation',
                  width: 60
                },
                {
                  title: '合计',
                  dataIndex: 'supervisorViolationTotal',
                  width: 60,
                  customRender: function(text) {
                    return <span style={{ color: '#e6b422', fontWeight: 'bold' }}>{text}</span>
                  }
                }
              ]
            },
            {
              title: '共计',
              dataIndex: 'violationTotal',
              width: 80,
                  customRender: function(text) {
                    return <span style={{ color: '#bf242a', fontWeight: 'bold' }}>{text}</span>
                  }
            }
        ],
        loadData: [],
        dangerCheckData: []
        }
    },
    created() {
      this.getDangerCheckType()
    },
    methods: {
        onChange1(date, dateString) {
            // console.log(dateString, date)
            if (this.queryParam.TimeEnd && dateString) {
              if (dateString > this.queryParam.TimeEnd) {
                this.$message.error('开始时间不能晚于结束时间')
                this.TimeEnd = moment(new Date(), 'YYYY-MM-DD')
                this.TimeOn = moment(new Date(), 'YYYY-MM-DD').subtract(1, 'months')
                this.queryParam.TimeOn = moment(new Date()).subtract(1, 'months').format('YYYY-MM-DD')
                this.queryParam.TimeEnd = moment(new Date()).format('YYYY-MM-DD') + 'T' + moment().format('23:59:59')
              } else {
                this.queryParam.TimeOn = dateString
              }
            } else {
              this.queryParam.TimeOn = dateString
            }
          },
        onChange2(date, dateString) {
          if (this.queryParam.TimeOn && dateString) {
            if (this.queryParam.TimeOn > dateString) {
              this.$message.error('开始时间不能晚于结束时间')
              this.TimeEnd = moment(new Date(), 'YYYY-MM-DD')
              this.TimeOn = moment(new Date(), 'YYYY-MM-DD').subtract(1, 'months')
              this.queryParam.TimeOn = moment(new Date()).subtract(1, 'months').format('YYYY-MM-DD')
              this.queryParam.TimeEnd = moment(new Date()).format('YYYY-MM-DD') + 'T' + moment().format('23:59:59')
            } else {
              this.queryParam.TimeEnd = dateString + 'T' + moment().format('23:59:59')
            }
          } else {
            this.queryParam.TimeEnd = dateString + 'T' + moment().format('23:59:59')
          }
        },
        handleClick() {
          if ((!this.TimeOn && !this.TimeEnd) || (this.TimeOn && this.TimeEnd)) {
            // 后端方法
            this.select()
          } else {
            this.$message.warning('请填写完整的查询条件')
          }
        },
        getDangerCheckType() {
          getDangerCheckType().then(res => {
            this.dangerCheckData = res.data
          })
        },
        select() {
            // 后端方法
            this.saving = true
            getViolationTotalQuery(this.queryParam).then((res) => {
              this.loadData = res.data.rows
            })
            .finally(() => {
                // 不管成功失败都要取消loading状态
                this.saving = false
              })
        }
    }
}
</script>

<style lang="less" scoped>
/deep/.ant-table-tbody tr:last-child
 {
  background-color:#f5f5f5d6;
 }

</style>
